<script setup lang="ts">
import * as echarts from 'echarts';

//页面加载完成后加载我们的图标
import { onMounted } from 'vue'

onMounted(async () => {

  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('echartsMain-Pie')!;
  var myChart = echarts.init(chartDom);
  myChart.resize({
    width: 500,
    height: 200
  })
  var option: EChartsOption;

  option = {
    title: {
      text: '需求完成度',
      left: 'right'
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    color: ['rgb(230,160,60)', 'rgb(65,160,255)', 'rgb(105,195,60)', 'rgb(250,110,110)'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '70%',
        data: [
          { value: 25, name: '签核需求' },
          { value: 12, name: '开发需求' },
          { value: 9, name: '测试需求' },
          { value: 3, name: '查收需求' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);

})


</script>

<template>
  <div id="echartsMain-Pie"></div>
</template>